<template>
  <div class="width-110 mx-auto my-40 flex_between_start">
    <div id="header" class="w-60 py-4 border border-y border-color-dark min-height-20">
      <p class="text-20">{{state.detail.name}}</p>
      <p class="my-4 flex_ycenter">
        <span>{{state.detail.employmentType}}</span>
        <span class="mx-1">|</span>
        <span>{{state.detail.city}}</span>
        <span class="mx-1">|</span>
        <span>{{state.detail.type}}</span>
        <span class="mx-1">|</span>
        <span>{{state.detail.createdAt}}</span>
      </p>
      <div class="detail" v-html="state.detail.content"></div>
      <el-button @click="state.dialogVisible = true" class="bg-orange width-15 height-4 mt-10" type="warning">申请职位</el-button>
    </div>
    <div class="w-35 border border-y border-color-dark min-height-20 py-7">
      <span class="text-24 font-weight-bold">相关职位</span>
      <div v-for="job in state.detail.relevant" :key="job.id" @click="getJobDetail(job.id)" class="w-100 py-3 border border-bottom cursor-pointer">
        <p class="text-24">{{job.name}}</p>
        <p class="mb-4 mt-2">{{job.city}}</p>
        <p class="content">{{job.simpleContent}}</p>
      </div>
      <el-empty v-if="!state.detail.relative?.length" description="no data" />
    </div>
    <el-dialog
      v-model="state.dialogVisible"
      title="提示"
      width="30%"
    >
      <span>请将简历投递至hr@kupogroup.com</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="state.dialogVisible = false"
            >好的</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
  <ContactUs/>
  <CommonFooter/>
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import urls from '@/api/index'
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'

const router = useRouter()
const state = reactive({
  id: '',
  detail: {},
  dialogVisible: false
})
watch(() => router.currentRoute.value.query.id, (newVal) => {
  state.id = newVal
  getDetail()
})
const getDetail = () => {
  urls.concat.getJobDetail(state.id)
    .then((res) => {
      state.detail = res.data
    })
    .catch((err) => {
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  state.id = router.currentRoute.value.query.id
  const header = document.getElementById('header')
  header.scrollIntoView()
  getDetail()
})
</script>

<style lang="scss">
.detail{
  p{
    word-break: break-all;
  }
}
</style>
